<template>
  <div id='big'>
    <div class='top_box'>
      <div id="top" >
          <!-- 店铺顶部 -->
        <div class='s_top' v-for='list in shoplist' :key='list.id'>
              <div class='s_tt a11' >
                <div class='stt_l'>
                   <li  v-for='(img,index) in list.img' :key="'img'+index" class='s_logo'>
                       <img :src='img.imgsrc' alt=''>
                   </li>
                  <div class='s_t_info'>
                      <h1>{{list.title}}店</h1>
                      <p><span>{{list.transform}}专送</span>|<span>{{list.dm}}分钟</span></p>
                      <p>基础运送费{{list.dnum}}元</p>
                  </div>
                  </div>
                  <div class='stt_r' @click="scroll2()">
                      <span class='s_love'></span>
                      <p class='s_t_shop'>店铺信息<span class='arow22'></span></p>
                  </div>
              </div>
              <div class='s_tb a11'>
                  <ul class='shop_right_cc cc_add' v-for='list in shoplist' :key='list.id'>
                <span class='arrow' @click="show"></span>
                  <li  v-for='(yhqq,index) in list.yhqq' :key="'yhqq'+index" class='yhq'>
                <span class='coupon'>{{yhqq.type}}</span>
                <span class='y_title'>{{yhqq.title}}</span>
                  </li>
                  <li  v-for='(yhq,index) in list.yhq' :key="'yhj'+index" class='yhq'>
                <span class='discount' >{{yhq.type}}</span>
                <span class='y_title'>{{yhq.title}}</span>
                  </li>
                </ul>
              </div>
          </div>
        <div class='s_top_body'>
          <!-- 店铺优惠券 -->
              <div class='s_discount a11 ' >
               <div class='sd_line'>
                 <h2>店铺优惠券</h2>
               </div>
               <div class='coupons'>
                 <li class='c_box' v-for='lists in shopcount' :key='lists.id'>
                   <div class='c_discount'><p>{{lists.cnum}}<span class='yuan'>元</span></p></div>
                   <div class='c_list'>
                     <h3>满{{lists.cmoney}}可用</h3>
                     <p id='cp1'>{{lists.c_limit}}</p>
                     <p id='cp2'>{{lists.c_date}}</p>
                   </div>
                   <div class='c_redemption'>
                     <div class='c_rc'>
                     <div class='cc'>领券</div>
                     </div>
                   </div>
                 </li>
               </div>
              </div>
          <!-- 店铺评价 -->
              <div class='s_evaluate a11'>
                <div class='sd_line'>
                 <h2>店铺评价</h2>
                 <div class='e_box'  >
                   <div class='e_score_d' v-for='listss in evallist' :key='listss.id'>
                     <div class='e_score'>
                        <p class='e_s'>{{listss.grade}}</p>
                        <p class='e_f'>综合评分</p>
                     </div>
                     <div class='e_evaluation'>
                        <p class='e_s'>{{listss.synthesis}}</p>
                        <p class='e_f'>评论数</p>
                     </div>
                   </div>
                   <div class='e_talk' v-for='listss in evallist' :key='listss.id'>
                     <div class='e_user'>
                        <div class='e_user_a'>
                          <span class='e_user_portrait'></span>
                        </div>
                        <div class='e_user_b'>
                          <div class='e_username'>{{listss.username}}</div>
                          <span class='stary'>{{listss.star}}</span>
                        </div>
                        <div class='e_date'>
                          <span class='e_d_image'></span>
                          {{listss.date}}
                        </div>
                     </div>
                     <div class='e_advantages'>
                       <span class="e-img"></span>
                       <p class='e_benefits'>{{listss.benefits}}</p>
                     </div>
                   </div>
                 </div>
               </div>
               <div class='e_alink'>查看用户的全部评价 ></div>
              </div>
          <!-- 店铺信息 -->
          <div class='s_info a11' v-for='shoplists in shopnum' :key='shoplists.id'>
                 <div class='sd_line' >
                  <h2>店铺信息</h2>
                 </div>
                 <div class='shop_info'>
                   <div class='e-box'>
                     <div class='s_i_1'>
                       <p>商品数量：{{shoplists.snum}}件</p>
                       <p>月销单量：{{shoplists.salenum}}千+</p>
                       <p>关注人数：{{shoplists.peoplenum}}人</p>
                       <p>营业时间：{{shoplists.mtime}}-{{shoplists.etime}}</p>
                       <p>门店地址：{{shoplists.adress}}</p>
                       <p>门店电话：{{shoplists.phone}}</p>
                    </div>
                    <div class='e_talk '>
                      <div class='s_i_bottom'>
                        <p class='s_i_bl'>商家资质</p>
                        <P class='a35 s_i_br'>></p>
                      </div>
                   </div>
                   <div class='s_report'>
                     <span class='s_r_l'>
                       举报商家得红包
                     </span>
                     <span class='s_r_r'>最高奖100元 ></span>
                   </div>
                   </div>
                 </div>
          </div>
        </div>
        <div class='b_scroll b_scroll2' @click="scroll()">
          <span class='arow11'></span>
          <p class='s_p'>点击继续购物</p>
        </div>
      </div>
    </div>
    <div id='shop'>
      <!-- 搜索框设置 -->
       <div class='search'>
         <div class='search_box'>
           <span>搜索店内商品</span>
         </div>
       </div>
       <div class='list_body'>
         <div class='left'>
           <ul class='menu'>
               <li v-for='menu in menus' :key="menu.id" class='menu_li' @click="addlist()">
                   <span class='text' @click="subSpan()">{{menu.text}} </span>
                   <ul class='menu' v-show='show'>
                      <li v-for='smenu in menu.children' :key="smenu.id" @click="loadProducts" >
                         <span class='text1' @click="addSpan()">{{smenu.text}}</span>
                       </li>
                   </ul>
               </li>
           </ul>
         </div>
         <div class='right'>
           <div class='right_top'>
             <span class='rightTop'></span>
           </div>
           <ul v-for='product in products' :key="product.id" class='goods_right'>
              <div class='goods_l'>
                <img  :src='product.imgsrc' alt=''>
              </div>
              <div class='goods_r'> 
                 <h2><router-link :to="{path:'/goods'}">{{product.title}}</router-link></h2>
                 <span>月售{{product.pnum}}件</span><span  class='line'></span><span>好评{{product.elnum}}%</span>
                 <div class='r_bottom'>
                   <p class='goods_price'><span>￥</span>{{product.price}}</p>
                   <div class='buttonone'>
                     <li v-if='product.id in $root.cars[shopid]'>
                      <div @click="carSub(product)" class='btn_left'></div>
                    </li>
                    <div class='show'> {{product.num}}</div>
                    <div @click="carAdd(product)" class='btn_right'></div>
                   </div>
                 </div>
              </div>
           </ul>
            <div class='r_more'>
                   <span class='r_b_others'>去看看其他分类吧</span>
            </div>
         </div>
       </div>
   </div> 
   <div class='car'>
     <car :shopid="shopid"></car>
   </div>
   <div class='a7y'>
   </div>
  </div>
</template>
<script>
export default {
  props:['shopid'],
  data() {
    return {
      menus: [],
      products: [],
      shoplist: [],
      shopcount: [],
      evallist: [],
      shopnum: [],
      show: false
    };
  },
  created() {
    this.$set(this.$root.cars,this.shopid,{})//购物车初始化
    console.log(this.$root.cars)
    this.getShopMenus();
    this.loadProducts();
    this.shopLists();
    this.shopCount();
    this.evalList();
    this.shopNum();
  },
  methods: {
    carAdd(product){
        if(product.id in this.$root.cars[this.shopid]){
          if(this.$root.cars[this.shopid][product.id].num>=product.store){return}
          this.$root.cars[this.shopid][product.id].num++
        }else{
          product.num=1
          // this.$root.cars[this.shopid][product.id]=product
          this.$set(this.$root.cars[this.shopid],product.id,product)
        }
         this.$jq(event.target).prev().addClass('show2')
    },
    carSub(product){
          this.$root.cars[this.shopid][product.id].num--
          if(this.$root.cars[this.shopid][product.id].num<=0){
            this.$delete(this.$root.cars[this.shopid],[product.id])
            this.$jq(event.target).parent().next().removeClass('show2')
          }
    },
    getShopMenus() {
      this.$jq.get(this.apiurl + "/shop/menus").done(result => {
        this.menus = result.data;
      });
    },
    loadProducts() {
      this.$jq.get(this.apiurl + "/shop/products").done(result => {
        this.products = result.data;
      });
    },
    addSpan(){
       this.$jq('.rightTop').text(this.$jq(event.target).text())
       this.$jq('.right_top').addClass('show2')
    },
    subSpan(){
       this.$jq('.right_top').removeClass('show2')
    },
    addlist() {
      this.$jq(event.target)
        .next()
        .slideToggle();
      //  this.$jq(event.target).addClass('shop2')
    },
    scroll(){
       if(this.$jq(event.target).parent().parent().toggleClass('top_box')){
         this.$jq(event.target).toggleClass('top_box')
       }
       this.$jq('.b_scroll').toggleClass('b_scroll2')
       this.$jq('#shop').toggleClass('shop2')
       this.$jq('.stt_r').removeClass('shop2')
    },
    scroll2(){
       this.$jq('.top_box').toggleClass('top_box')
       this.$jq('.b_scroll').toggleClass('b_scroll2')
       this.$jq('#shop').toggleClass('shop2')
       this.$jq(event.target).toggleClass('stt_r2')
       this.$jq('.stt_r').addClass('shop2')
    },
    //顶部优惠券
    shopLists() {
      this.$jq.get(this.apiurl + "/shop/shoplist").done(result => {
        this.shoplist = result.data;
      });
    },
    shopCount() {
      this.$jq.get(this.apiurl + "/shop/shoplist").done(result => {
        this.shopcount = result.data2;
      });
    },
    evalList() {
      this.$jq.get(this.apiurl + "/shop/shoplist").done(result => {
        this.evallist = result.data3;
      });
    },
    shopNum() {
      this.$jq.get(this.apiurl + "/shop/shoplist").done(result => {
        this.shopnum = result.data4;
      });
    }
  }
};
</script>
<style scoped>
/* 顶部 */
.top_box{
  height:7.25rem;
  overflow:hidden;
  z-index:6;
}
#top {
  width: 100%;
  background: url(/static/store_industry_1.jpg) 0 0 no-repeat;
  background-size: cover;
  z-index: 66;
  display: fixed;
  background-position: 0 0;
}
/* 店铺顶部 */
.s_top {
  width: 96%;
  margin: auto;
  z-index: 66;
}
.s_top,
h2 {
  color: #fff;
}
.s_logo > img {
  width: 3.25rem;
  height: 3.25rem;
}
.s_top_body{
  z-index: 666;
}
.a11 {
  width: 96%;
  margin: auto;
  z-index: 777;
}
.s_love {
  background: url(/static/focus.png) 0rem 0 no-repeat;
  width: 1.375rem;
  height: 1.125rem;
  display: inline-block;
  background-size: 3.75rem auto;
}
.s_logo,
.s_love {
  margin-top: 0.8rem;
}
.s_tt {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.6rem;
}
.stt_r2{
  display: none
}
.stt_l {
  width: 90%;
  display: flex;
  justify-content: flex-start;
}
.s_logo {
  margin-right: 1rem;
}
.stt_r {
  width: 20%;
  text-align: center;
}
.s_t_info > h1 {
  line-height: 1rem;
  font-size: 1.125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  font-style: normal;
}
.s_t_info > p {
  line-height: 0.25rem;
  font-size: 0.625rem;
}
.s_t_shop{
  display: inline-block;
  width: 3.8rem;
  height: 1.5rem;
  top: 2.6rem;
  text-align: left;
  padding-left: 0.8rem;
  color: #FFF;
  font-size: 0.625rem;
  line-height: 0.875rem;
  vertical-align: baseline;
  border-radius: 0.25rem;
  background: rgba(70,70,70,0.5);
}
.arow22{
    background: url(/static/store_sprites_4.6.png) no-repeat;
    height: 1rem;
    width: 1rem;
    display: inline-block;
    background-position: -9rem -8.905rem;
    background-size: 13.75rem auto;
    margin-left: 0.1rem;
}
.yhq {
  line-height: 1.6rem;
}
.c_list {
  text-align: left;
}
.c_list > h3 {
  margin-bottom: 0.2rem;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.875rem;
  white-space: nowrap;
  font-weight: normal;
  font-style: normal;
  line-height: 0.675rem;
}
.c_list > p {
  font-size: 0.68rem;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 0.68rem;
}
/* 顶部优惠券 */
.coupon {
  background: #ff6c57;
  color: #ffffff;
  border-radius: 0.125rem;
}
.discount {
  background: #5fbc65;
  color: #ffffff;
  border-radius: 0.125rem;
}
.discount,
.coupon {
  padding: 0.1rem;
  margin-right: 0.2rem;
}
/* 店铺优惠券  */
.sd_line {
  width: 100%;
  position: relative;
}
.sd_line > h2 {
  margin-bottom: 1.25rem;
  position: relative;
  text-align: center;
  line-height: 1rem;
  font-weight: normal;
  font-style: normal;
}
.sd_line:before {
  content: "";
  position: absolute;
  top: 0.56rem;
  left: 0;
  right: 64%;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.sd_line:after {
  content: "";
  position: absolute;
  top: 0.56rem;
  right: 0;
  left: 64%;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.coupons {
  width: 96%;
  margin: auto;
}
.c_box {
  display: flex;
  width: 96%;
  justify-content: space-between;
  border-left: 0.15rem solid #ff5757;
  border-radius: 0.4rem;
  margin: 0 auto 0.6rem;
  height: 4.375rem;
}
.c_discount,
.c_list,
.c_rc {
  border-top: 0.1rem solid #ff9d9d;
  border-bottom: 0.1rem solid #ff9d9d;
  border-right: 0.1rem solid #ff9d9d;
}
.c_discount {
  width: 20%;
}
.c_list,
.c_discount,
.c_rc {
  background: #fff;
}
.c_discount > p {
  text-align: center;
  margin-left: 0.125rem;
  font-size: 1.25rem;
  color: #ff4f64;
  font-family: Arial, "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif;
  line-height: 2.2rem;
}
.yuan {
  margin-left: 0.2rem;
  font-size: 0.96rem;
  color: #ff4f64;
}
.c_list {
  width: 52%;
}
.c_redemption {
  width: 25%;
  text-align: center;
  margin: 0 auto 0;
  background-position: 0 0;
  background: url(/static/store_act_new_conpon.png) no-repeat;
  height: 4.2rem;
  background-size: 0.6rem 100%;
  padding-left: 0.58rem;
}
.c_img {
  width: 0.2rem;
  height: auto;
}
#cp1 {
  margin-bottom: 0;
}
#cp2 {
  margin-top: 0.2rem;
}
.c_rc {
  width: 100%;
  height: 100%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  background-color: #fffbfb;
  border-left: none;
}
.cc {
  display: inline-block;
  background-color: #ff5757;
  width: 3.125rem;
  height: 1.25rem;
  font-size: 0.86rem;
  color: #fefffe;
  text-align: center;
  border-radius: 1.25rem;
  margin: 1.5rem auto;
}
/* 店铺评价 */
.s_evaluate {
  color: white;
  z-index:222;
}
.e_box {
  background: rgba(255, 255, 255, 0.1);
  width: 96%;
  margin: auto;
}
.e_s {
  text-align: center;
  font-size: 1.68rem;
  font-weight: bold;
  height: 2.25rem;
  line-height: 2.25rem;
  padding: 0;
  margin: 1rem auto 0;
}
.e_score_d {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.e_score_d:after {
  clear: both;
  display: block;
  content: "...";
  visibility: hidden;
  height: 0;
  font-size: 0;
}
.e_score,
.e_evaluation {
  width: 50%;
  text-align: center;
}
.e_score {
  position: relative;
}
.e_score:after {
  height: 84%;
  content: "";
  width: 0.1rem;
  border-right: 0.1rem solid #e8e8e8;
  position: absolute;
  top: 0.6rem;
  right: 0.1rem;
  transform: scaleX(0.5);
  z-index: 2;
}
.e_f {
  text-align: center;
  font-size: 0.75rem;
  height: 0.9rem;
  line-height: 0.9rem;
}
.e_talk {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.e_talk:after {
  content: "";
  border-bottom: 0.1rem dashed rgba(236, 236, 236, 0.5);
  z-index: 2;
  width: 90%;
  margin: auto;
}
.e_talk:before {
  content: "";
  border-bottom: 0.1rem dashed rgba(236, 236, 236, 0.5);
  z-index: 2;
  margin-bottom: 1rem;
  width: 90%;
  margin: 0 auto 1rem;
}
.e_user_portrait {
  width: 2.18rem;
  height: 2.18rem;
  display: inline-block;
  border-radius: 1.125rem;
  background: url(/static/evaluateHeader.jpg);
  background-size: cover;
}
.e_user {
  display: flex;
  width: 90%;
  justify-content: space-between;
  margin: auto;
}
.e_user_a {
  width: 14%;
  margin-right: 0.5rem;
}
.e_user_b {
  width: 56%;
}
.e_date {
  width: 60%;
}
.e_user_b,
.e_date,
.stary {
  font-size: 0.875rem;
  line-height: 1.2rem;
}
.e-img {
  margin-top: 0.6rem;
  display: inline-block;
  background-image: url(/static/serviceMark.png);
  background-repeat: no-repeat;
  width: 0.81rem;
  height: 1.125rem;
  background-size: 100% 100%;
  float: left;
  line-height: 1.32rem;
  margin-right: 0;
}
.e_advantages {
  margin: 0 auto;
  overflow: hidden;
  line-height: 1.32rem;
  font-size: 0.75rem;
  text-align: center;
  width: 64%;
}
.e_benefits {
  color: rgba(255, 255, 255, 0.6);
}
.e_alink {
  width: 100%;
  text-align: center;
  height: 2.56rem;
  line-height: 46px;
  font-size: 0.875rem;
}
/* 店铺信息 */
.shop_info {
  color: #fff;
  font-size: 0.875rem;
  padding-bottom: 4rem;
}
.s_i_1 {
  padding-left: 1rem;
  padding-top: 1rem;
}
.s_i_bottom {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin:-1rem auto 0
}
.s_i_bl {
  width: 40%;
}
.s_i_br {
  width: 40%;
  text-align: right;
}
.s_report{
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin:-1rem auto 1rem;
  padding:1rem 0;
}
.e-box{
     background-color: rgba(255,255,255,0.1);
     width:96%;
     margin: auto
}
/* 底部浮动框 */
.b_scroll{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 2.4rem;
    padding-top: 0.56rem;
    color: #666;
    text-align: center;
    background: #f2f8f3;
    box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
    line-height:0.2rem;
}
.b_scroll2{
    display: none;
}
.s_p{
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.arow11{
  background: url(/static/store_sprites_4.6.png) no-repeat;
  height: 0.5rem;
  width: 2.8125rem;
  display: inline-block;
  background-position: -0.1rem -1.05rem;
  background-size:13.75rem auto
}
.scroll2{
  display: none;
}
/* 空白参考项 */
</style>
<style>
/* 商铺内容开始 ，基本定位/左边/右边*/
#shop {
  position: fixed;
  bottom:0;
  top:7.15rem;
  left:0;
  width: 100%;
  padding-bottom: 2.81rem;
  z-index:4
}
.shop2{
  display:none;
}
.list_body{
  position: fixed;
  right:0;
  left:0;
  top:10.4rem;
  bottom:0;
  z-index: 1;
  border-top:0.1rem ;
  background:#fff;
  margin-bottom:2rem;
}
.left {
  width: 25%;
  background: #f4f4f4;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding-bottom:4rem;
}
.right {
  position: absolute;
  margin-left:25%;
  top:0;
  bottom:0;
  right:0;
  width:75%;
  overflow-x:hidden;
  overflow-y:auto;
  background: #f4f4f4;
  z-index:1;
  padding-bottom:4rem;
  background:#fff;
}
/* 设置右上角的文本 */
.right_top{
  height:1.94rem;
  display:none;
  z-index: 11;
  background:#f4f4f4;
}
.rightTop{
  font-size:0.75rem;
  line-height:2rem;
  padding-left:0.68rem;
}
.menu {
  padding: 0;
  margin: 0;
  list-style: none;
  cursor: pointer;
}
/* 搜索框设置 */
.search{
  width:100%;
  background:#ffffff;
  height:3.125rem;
  z-index:1;
   padding-top:0.6rem
}
.search_box{
  border-radius:1.875rem;
  position: relative;
  background: #F4F4F4;
  height:1.875rem;
  z-index:16;
  margin:0rem auto 0;
  width:94%;
  z-index:333;
}
.search_box>span{
  background:url(/static/search_bar_sprites.png) no-repeat;
  line-height:2rem;
  background-size:3.6rem auto;
  display: inline-block;
  background-position:-0.6rem -0.8rem;
  padding-left:2.4rem;
  font-size:0.88rem;
  z-index:1;
}
/* 左边列表项设置 */
.menu{
    color: #666666;
    font-size: 0.81rem;
    background:#fff;
}
.menu_li{
  border:#CFCFCF 0.05rem solid;
  line-height:2.6rem;
  background:#f4f4f4;
}
.menu_li2{
  background: #fff;
  color:#47b34f;
  border-left:#47b34f 0.15rem solid;
}
.text,.text1{
  font-size:0.88rem;
  padding-left:1rem;
}
.text{
  display: inline-block;
  width: 100%;
}
.text1{
  font-size:0.86rem;
  width: 100%;
}
/* 右边列表商品 */
.goods_right{
  width:100%;
  display:flex;
  justify-content:space-between;
  background:#fff;
  border-bottom:0.05rem solid #e8e8e8;
}
.goods_l{
  width:30%;
  padding-left:1rem;
}
.goods_l>img{
  width:100%;
  margin:0.5rem auto;
}
.goods_r{
  width:70%; 
  padding:0 0.8rem;
}
.goods_r>h2{
 color:#333;
 font-size:0.875rem;
 font-style:normal;
 font-weight:normal;
 text-overflow: ellipsis;
 overflow: hidden;
 display: -webkit-box;
 -webkit-line-clamp: 2;
}
.line{
  display: inline-block;
  background:url(/static/icon_line_split.jpg) no-repeat;
  width: 0.5rem;
  height: 0.625rem;
  background-position:0.2rem 0;
}
.goods_price{
 color: #ff3434;
 font-size:1rem;
}
.goods_price>span{
  font-size:0.625rem;
}
.r_bottom{
  display:flex;
  justify-content:space-between;
  width:100%;
}
.goods_price{
  width:40%;
  text-align:left;
}
.buttonone{
  text-align:right;
  display:inline-block;
  width:60%;
  display:flex;
  justify-content:flex-end;
}
.btn_right{
  background-image:url('/static/addNumSprite.png');
  display:inline-block;
  background-size:cover;
  width:1.8rem;
  height:1.8rem;
  margin-top: 0.68rem;
}
.btn_left{
  background-image:url('/static/addNumSprite.png');
  display:inline-block;
  background-size:cover;
  width:1.8rem;
  height:1.8rem;
  background-position:-2.5rem 0;
  margin-top: 0.68rem;
}
.show{
  color:#333333;
  padding:1rem;
  display: none;
  font-size:0.75rem;
}
.show2{
  display:block
}
.r_more{
  text-align:center;
  margin:1rem auto 0.625rem;
}
.r_b_others{
  font-size:0.69rem;
  position: relative;
}
.r_b_others:before{
  content: "";
  height: 0;
  border-top: 0.1rem solid #d9d9d9;
  width: 50%;
  position: absolute;
  top: 50%;
  margin-top: -0.1rem;
  left: -56%;
  display: inline-block
}
.r_b_others:after{
   content: "";
  height: 0;
  border-top: 0.1rem solid #d9d9d9;
  width: 50%;
  position: absolute;
  top: 50%;
  margin-top: -0.1rem;
  right: -56%;
  display: inline-block
}
/* 底部遮罩层 */
.a7y{
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,0.4);
    display:none;
}
.a7y2{
  display:block;
}
/* 购物车 */
.car{
  position:fixed;
  bottom:0;
  z-index:22;
  width: 100%;
}
</style>



